<template>
  <view class="container">
    <view class="notice-card">
      <view class="header">
        <text class="title">图书馆乒乓球区预约通知</text>
      </view>
      
      <view class="content">
        <text class="salutation">亲爱的老师、同学们：</text>
        
        <text class="paragraph">长时间埋首书本，是不是总感觉肩颈紧绷、精神疲惫？想找个就近的地方舒展身体，却又不想浪费太多往返时间？现在，好消息来啦！图书馆内部乒乓球区正式开启预约，让你在学习间隙，足不出馆就能享受运动的快乐，轻松缓解学习压力！</text>
        
        <view class="section">
          <text class="section-title">一、预约对象</text>
          <text class="section-content">全体在校教职工与学生</text>
        </view>
        
        <view class="section">
          <text class="section-title">二、预约方式</text>
          <text class="section-content">打开学校图书馆官方 APP，在首页找到 "服务中心"，点击 "乒乓球区预约" 模块；</text>
          <text class="section-content">进入预约页面后，选择想要预约的日期和时间段（每个时间段为 1 小时），填写个人姓名、学号 / 工号及联系方式；</text>
          <text class="section-content">提交预约申请，待系统显示 "预约成功" 后，即完成预约。预约成功后，会收到短信提醒，请留意查看。</text>
        </view>
        
        <view class="section">
          <text class="section-title">三、使用规则</text>
          <text class="section-content">每人每周最多预约 2 次，每次仅限 1 小时，避免资源浪费，让更多人有机会使用；</text>
          <text class="section-content">预约成功后，请在预约时间段开始前 5 分钟到达乒乓球区，凭学生证 / 工作证核对信息后入场；</text>
          <text class="section-content">若无法按时前往，需在预约时间段开始前 1 小时取消预约，未取消且未按时到场的，将视为违约，连续 3 次违约，将暂停 1 个月预约资格；</text>
          <text class="section-content">进入乒乓球区后，请穿着软底运动鞋，禁止穿高跟鞋、皮鞋等可能损坏场地的鞋子；</text>
          <text class="section-content">爱护乒乓球拍、球台等公共器材，禁止故意损坏，若造成损坏，需按原价赔偿；</text>
          <text class="section-content">运动过程中，保持安静，避免大声喧哗、打闹，不影响图书馆内其他师生学习；</text>
          <text class="section-content">运动结束后，将球拍、乒乓球等器材归位，清理场地内的垃圾，保持场地整洁。</text>
        </view>
        
        <view class="section">
          <text class="section-title">四、温馨提示</text>
          <text class="section-content">乒乓球区位于图书馆三楼东侧，现场提供基础款乒乓球拍和乒乓球，若有特殊需求，也可自带个人运动装备；</text>
          <text class="section-content">运动前请做好热身运动，避免运动损伤；</text>
          <text class="section-content">请合理安排学习与运动时间，做到劳逸结合，高效学习的同时，拥有健康的身体。</text>
        </view>
        
        <text class="conclusion">学习累了，就来图书馆乒乓球区挥拍放松吧！在这里，不仅能释放压力，还能结识志同道合的球友，享受运动带来的活力与快乐。赶紧拿起手机，预约属于你的运动时光吧！</text>
        
        <text class="contact">如有疑问，可拨打图书馆服务热线：XXX-XXXXXXX，或前往图书馆一楼服务台咨询。</text>
        
        <view class="signature">
          <text>学校图书馆</text>
          <text>202X 年 X 月 X 日</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .notice-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .header {
      text-align: center;
      margin-bottom: 40rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .content {
      .salutation {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 20rpx;
      }
      
      .paragraph {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        display: block;
        margin-bottom: 30rpx;
        text-align: justify;
      }
      
      .section {
        margin-bottom: 30rpx;
        
        .section-title {
          font-size: 30rpx;
          font-weight: bold;
          color: #007aff;
          display: block;
          margin-bottom: 15rpx;
        }
        
        .section-content {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
          display: block;
          margin-bottom: 10rpx;
          text-align: justify;
          text-indent: 2em;
        }
      }
      
      .conclusion {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        display: block;
        margin: 40rpx 0;
        text-align: justify;
        background-color: #e8f4ff;
        padding: 20rpx;
        border-radius: 10rpx;
      }
      
      .contact {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        display: block;
        margin-bottom: 30rpx;
        text-align: justify;
      }
      
      .signature {
        text-align: right;
        
        text {
          display: block;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
}
</style>